<template>
    <div class="common-layout">
        <el-container>
            <!-- 左侧区域 -->
            <el-aside width="auto">
                <el-menu default-active="" class="el-menu-vertical-demo" :collapse="isCollapse" router>
                    <!-- 收缩按钮 -->
                    <img v-show="!isCollapse" src="../../assets/img/pic/logo/white.png" class="aside_title_close"
                        @click="isCollapse = true" />
                    <!-- 展开按钮 -->
                    <i class="el-icon-s-unfold aside_title_open" v-show="isCollapse" @click="isCollapse = false"></i>
                    <!-- 菜单区域 -->
                    <el-submenu index="100" :popper-append-to-body="true">
                        <!-- 具名插槽 -->
                        <template slot="title">
                            <i class="el-icon-setting el-i"></i>
                            <span>基础设置</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">网站管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <!-- 动态菜单 -->
                    <el-submenu v-for="(item, index) in menus" :key="item.id" :index="index + ''">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span>{{ item.title }}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="(m, i) of item.children" :key="m.id" :index="m.url">{{
                                m.title
                            }}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!-- 右侧区域 -->
            <el-container>
                <!-- 头部区域 -->
                <el-header>
                    <!-- 办公消息提示 -->
                    <el-badge is-dot class="title_msg">
                        <i class="el-icon-s-comment"></i>
                    </el-badge>
                    <!-- 切换主题区域 -->
                    <el-dropdown class="dropdown1">
                        <span class="el-dropdown-link">切换主题<i class="el-icon-arrow-down el-icon--right"></i></span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>温馨黄</el-dropdown-item>
                                <el-dropdown-item>商务蓝</el-dropdown-item>
                                <el-dropdown-item>贤淑粉</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>

                    <!-- 语言国际化区域 -->
                    <el-dropdown class="dropdown2">
                        <span class="el-dropdown-link">国际化<i class="el-icon-arrow-down el-icon--right"></i></span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>中文</el-dropdown-item>
                                <el-dropdown-item>英文</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>

                    <!-- 用户信息 退出登录区域 -->
                    <el-dropdown class="dropdown3" @command="changeUser">
                        <span class="el-dropdown-link">{{ userName }}<i
                                class="el-icon-arrow-down el-icon--right"></i></span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="out">退出</el-dropdown-item>
                                <el-dropdown-item command="edit">修改信息</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <!-- 全屏服务区域 -->
                    <img :src='screenFull ? exitImg : fullImg' class="fullScreen" />
                </el-header>
                <!-- 右侧内容区域 -->
                <el-main>
                    <el-breadcrumb separator="/">
                        <!-- 问题：导航跳转重复 -->
                        <!-- push  replace  -->
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <!-- <el-breadcrumb-item :to="{ path: '/' }" replace>首页</el-breadcrumb-item> -->
                        <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <!-- 二级路由出口 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isCollapse: false,//缩放左侧菜单栏
            screenFull: false,//全屏开关
            fullImg: require("@/assets/img/icon/index/full.svg"),
            exitImg: require('@/assets/img/icon/index/exitfull.svg'),
            userName: "",//用户姓名
            menus: []//用户左侧菜谱权限
        }
    },
    mounted() {
        // 获取缓存中的用户信息
        let userInfo = localStorage.getItem('userInfo')
        let { menus, username } = JSON.parse(userInfo)
        this.userName = username
        this.menus = menus
        console.log(menus, username)
    },
    methods: {
        //监听第三个下拉菜单操作
        changeUser(type) {
            type == "out" ? this.loginOut() : this.userEdit()
        },
        //用户退出
        loginOut() {
            // 1.询问是否退出
            this.$confirm('确认退出吗？')
                .then(res => {
                    // 2.清除本地缓存中的用户信息
                    localStorage.removeItem('userInfo')
                    // 3.跳转到登录页面 replace|push
                    this.$router.replace('/login')
                })
                .catch(_ => { });
        },
        //用户信息编辑
        userEdit() { }
    }
}
</script>
<!-- scoped：样式作用域  使用样式深度穿透 -->
<style scoped lang="less">
/* ------------------------------------------------------容器样式------------------------------------------ */
.common-layout,
.el-container {
    width: 100vw;
    height: 100vh;
}

/* ------------------------------------------------------头部区域样式--------------------------------------- */
.el-header {
    background-color: white;
    color: #333;
    position: relative;
}

.title_msg {
    position: absolute;
    right: 450px;
    top: 23px;
}

.el-header div[class*="dropdown"] {
    position: absolute;
    line-height: 60px;
    color: #FF6040
}

.el-header .dropdown1 {
    right: 340px;
}

.el-header .dropdown2 {
    right: 240px;
}

.el-header .dropdown3 {
    right: 140px;
}

.fullScreen {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 40px;
    top: 15px;
    background: #FF6040;
    cursor: pointer;
}

/* -----------------------------------------------左侧栏样式区域---------------------------------------------- */
.el-aside {
    background: linear-gradient(to bottom, #FF6040, #FF8A80);
    color: #333;
    /* line-height: 200px; */
    overflow: hidden;
}

.aside_title_close {
    width: 130px;
    height: 35px;
    margin: 20px 32px;
    cursor: pointer;
}

.aside_title_open {
    cursor: pointer;
    color: white;
    font-size: 50px;
}

/deep/.el-menu {
    background: #FF6040;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 100vh;
    background: linear-gradient(to bottom, #FF6040, #FF8A80);
}

// 设置左侧菜单栏标题一级颜色
/deep/.el-submenu__title {
    color: white;
}

/* 设置左侧菜单栏icon颜色 */
.el-submenu .el-i {
    color: white;
}

/* 仅设置左侧菜单展开按钮样式颜色 */
.el-submenu /deep/.el-icon-arrow-down::before {
    content: "\e6df";
    color: white;
}

/* 左侧一级菜单标题栏激活文字颜色 */
/deep/.el-submenu__title:hover {
    // color: #FF6040 !important;
    // font-weight: bold;
    background-color: gray !important;
}

/* 左侧二级菜单标题栏激活文字颜色 */
.el-menu-item:hover {
    // color: #FF6040 !important;
    // background-color: gray !important;
}

/* ---------------------------------------------------------中间内容区域样式----------------------------------------------------- */
.el-main {
    background-color: #eee;
    color: #333;
}
</style>